import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { ArtistIntroWrapper } from './style'
export default memo(function ArtistIntro() {
  const { artistIntro,artistDesc,artistDetail } = useSelector(state => ({
    artistIntro: state.getIn(['artist', 'artistIntro']),
    artistDesc: state.getIn(['artist', 'artistDesc']),
    artistDetail:state.getIn(['artist','artistDetail'])
  }), shallowEqual)
  const intros = artistIntro || []
  return (
    <ArtistIntroWrapper>
      <h2 className='title'>
        <i className='icon'></i>
        {artistDetail.name}简介</h2>
      <p className="desc">
        {artistDesc}
      </p>
      {
        intros.map(item => {
          return (
            <div key={item.ti} className='item'>
              <h2 className="title">{item.ti}</h2>
              <p className='txt'>{item.txt}</p>
           </div>
          )
        })
      }
    </ArtistIntroWrapper>
  )
})
